<template>
  <div class="home">
    <div class="banner">
      <swiper></swiper>
    </div>

    <div class="notice">
      <announcement></announcement>
    </div>
    <div class="navbar-container">
      <navbar @click="routeTo"></navbar>
    </div>

    <ul class="good-list">
      <li 
        v-for="good in goods" 
        key="good.borrowOrder"
        @click.stop="clickHandle(good.borrowOrder)">
        <spliter></spliter>
        <good
          v-bind="good"></good>
      </li>
    </ul>
    <div class="home-footer"></div>
  </div>
</template>

<script>
  import spliter from 'components/common/spliter'
  import announcement from 'components/announcement'
  import navbar from 'components/navbar'
  import good from 'components/good'
  import swiper from 'components/common/swiper'

  export default {
    data () {
      return {
        goods: []
      }
    },
    created () {
      document.body.style.overflow = ''
      this.$http.get('/api/borrow/borrowInfo/list?currentPage=1&numPerPage=3')
        .then((res) => {
          if (res.data.success) {
            this.goods = res.data.data.list
            console.log(this.goods)
          }
          console.log(this.goods)
        })
        .catch((err) => {
          console.log(err)
        })
    },
    methods: {
      clickHandle (borrowOrder) {
        this.$router.push(`/goodDetail/${borrowOrder}`)
      },
      routeTo (router) {
        this.$router.push(router)
      }
    },
    components: {
      spliter,
      announcement,
      navbar,
      good,
      swiper
    }
  }
</script>

<style lang='scss'>
  .home {
    .bannder {
      width: 100%;
    }
    &-footer {
      height: 120px;
    }
  }
</style>
